<html>
  <head>
	<title>lry fist test</title>
	<link type="text/css" rel="stylesheet" href="./model.css" />
	<link type="text/css" rel="stylesheet" href="./js/mlcolorpicker/mlcolorPicker.css" />
	<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="./js/mlcolorpicker/mlcolorPicker.js"></script>
	<script type="text/javascript" src="./js/jquery.ba-replacetext.js"></script>
	<script type="text/javascript" src="./js/jquery.model.js"></script>
    <script type="text/javascript">
	$(function(){
            $('#query').click(function(event){
	      var color=$(this).parent().find('.matchcolor').css('background-color');
	      findModel($('#inputseq').val(),$('#model').val(),$('#result'),color);
	    });
            $('#model').keyup(function(event){
	      $('#query').trigger('click');
	    });
	    $('#newmodel').click(function(event){
		    $('#models').append('<label>model type:<input type="text" name="model" value="" id="model" /><input type="text" class="matchcolor" maxlength="6" /><input type="button" value="query" id="query" name="query" /></label><br />');
	      $('#models .matchcolor').mlColorPicker({'onChange':function(value,targ){
                $(targ).css('background-color','#' + value);
	      }});
            });
	    $('.matchcolor').mlColorPicker({'onChange':function(value,targ){
              $(targ).css('background-color','#' + value);
	    }});
         });
    </script>
  </head>
  <body>
      <h1>complement and model search</h1>
      <label>Please input sequence:
      <textarea id="inputseq" name="inputseq" value="" cols="80" rows="10"></textarea>
      </label><br />
      <div id="models">
	      <label>model type:<input type="text" name="model" value="" id="model" /><input type="text" class="matchcolor" maxlength="6" /><input type="button" value="query" id="query" name="query" /></label> <br />
      </div>
      <div> <input type="button" id="newmodel" value="more model" /></div>
      <h1>Result here:</h1>
      <div id="result"></div>
      <h3>IUPAC nucleotide code<a href="http://www.bioinformatics.org/sms/iupac.html">http://www.bioinformatics.org/sms/iupac.html</a></h3>
      <table border="1">
	<tr>
	  <td>A</td><td>Adenine</td>
	</tr>
	<tr>
	  <td>C</td><td>Cytosine</td>
	</tr>
	<tr>
	  <td>G</td><td>Guanine</td>
	</tr>
	<tr>
	  <td>T(or U)</td><td>Thymine(orUracil)</td>
	</tr>
	<tr>
	  <td>R</td><td>A or G</td>
	</tr>
	<tr>
	  <td>Y</td><td>T or C</td>
	</tr>
	<tr>
	  <td>S</td><td>G or C</td>
	</tr>
	<tr>
	  <td>W</td><td>A or T</td>
	</tr>
	<tr>
	  <td>K</td><td>T or G</td>
	</tr>
	<tr>
	  <td>M</td><td>A or C</td>
	</tr>
	<tr>
	  <td>B</td><td>C or G or T</td>
	</tr>
	<tr>
	  <td>D</td><td>A or G or T</td>
	</tr>
	<tr>
	  <td>H</td><td>A or C or T</td>
	</tr>
	<tr>
	  <td>V</td><td>A or C or G</td>
	</tr>
	<tr>
	  <td>N</td><td>A or C or G or T</td>
	</tr>
	<tr>
	  <td>. or -</td><td>gap</td>
	</tr>
      </table>
  </body>
</html>
